<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Dialogs in GTK#</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, C#, dialogs, GTK#, programming, Linux">
<meta name="description" content="In this part of the GTK# tutorial, we work
with dialogs.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>



<h1>Dialogs in GTK#</h1>


<p>
In this part of the GTK# programming tutorial, we will introduce dialogs. 
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
Dialog windows or dialogs are an indispensable part of most modern GUI applications.
A dialog is defined as a conversation between two or more persons. In a computer
application a dialog is a window which is used to "talk" to the application.
A dialog is used to input data, modify data, change the application settings etc.
Dialogs are important means of communication between a user and a computer program.
</p>


<h2>Message dialogs</h2>

<p>
Message dialogs are convenient dialogs that provide messages to the user of the application. 
The message consists of textual and image data. 
</p>

<div class="codehead">messages.cs</div>
<pre class="code">
using Gtk;
using System;
 
class SharpApp : Window {
 

    public SharpApp() : base("Messages")
    {
        SetDefaultSize(250, 100);
        SetPosition(WindowPosition.Center);
        DeleteEvent += delegate { Application.Quit(); }; 

        
        Table table = new Table(2, 2, true);
        
        Button info = new Button("Information");
        Button warn = new Button("Warning");
        Button ques = new Button("Question");
        Button erro = new Button("Error");

        info.Clicked += delegate {
            MessageDialog md = new MessageDialog(this, 
                DialogFlags.DestroyWithParent, MessageType.Info, 
                ButtonsType.Close, "Download completed");
            md.Run();
            md.Destroy();
        };

        warn.Clicked += delegate {
            MessageDialog md = new MessageDialog(this, 
                DialogFlags.DestroyWithParent, MessageType.Warning, 
                ButtonsType.Close, "Unallowed operation");
            md.Run();
            md.Destroy();
        };
        
        
        ques.Clicked += delegate {
            MessageDialog md = new MessageDialog(this, 
                DialogFlags.DestroyWithParent, MessageType.Question, 
                ButtonsType.Close, "Are you sure to quit?");
            md.Run();
            md.Destroy();
        };
        
        erro.Clicked += delegate {
            MessageDialog md = new MessageDialog (this, 
                DialogFlags.DestroyWithParent, MessageType.Error, 
                ButtonsType.Close, "Error loading file");
            md.Run();
            md.Destroy();
        };

        table.Attach(info, 0, 1, 0, 1);
        table.Attach(warn, 1, 2, 0, 1);
        table.Attach(ques, 0, 1, 1, 2);
        table.Attach(erro, 1, 2, 1, 2);
        
        Add(table);

        ShowAll();
    }

    public static void Main()
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }
}
</pre>

<p>
In our example, we will show four kinds of message dialogs. 
Information, Warning, Question and Error message
dialogs.
</p>

<pre class="explanation">
Button info = new Button("Information");
Button warn = new Button("Warning");
Button ques = new Button("Question");
Button erro = new Button("Error");
</pre>

<p>
We have four buttons. Each of these buttons will show a different 
kind of message dialog. 
</p>

<pre class="explanation">
info.Clicked += delegate {
    MessageDialog md = new MessageDialog(this, 
        DialogFlags.DestroyWithParent, MessageType.Info, 
        ButtonsType.Close, "Download completed");
    md.Run();
    md.Destroy();
};
</pre>

<p>
If we click on the info button, the Information dialog is displayed. 
The <code>MessageType.Info</code> specifies the type of the
dialog. The <code>ButtonsType.Close</code> specifies the button to 
be displayed in the dialog. The last parameter is the message dislayed. 
The dialog is displayed with the <code>Run()</code> method. 
The programmer must also call either the <code>Destroy()</code> or the 
<code>Hide()</code> method.
</p>

<img src="/img/gui/sharpgtk/information.png" alt="Information message dialog">&nbsp;&nbsp;
<img src="/img/gui/sharpgtk/warning.png" alt="Warning message dialog">&nbsp;&nbsp;
<img src="/img/gui/sharpgtk/question.png" alt="Question message dialog">&nbsp;&nbsp;
<img src="/img/gui/sharpgtk/error.png" alt="Error message dialog">



<h2>AboutDialog</h2>

<p>
The <code>AboutDialog</code> displays information about the application. 
<code>AboutDialog</code> can display a logo, the name of the application, 
version, copyright, website or licence information. It is also possible to give 
credits to the authors, documenters, translators and artists.
</p>

<div class="codehead">aboutdialog.cs</div>
<pre class="code">
using Gtk;
using System;
 
class SharpApp : Window {
 

    public SharpApp() : base("About")
    {
        SetDefaultSize(300, 270);
        SetPosition(WindowPosition.Center);
        DeleteEvent += delegate { Application.Quit(); } ;
        
        Button button = new Button("About");
        button.Clicked += OnClicked;
        
        Fixed fix = new Fixed();
        fix.Put(button, 20, 20);
        Add(fix);

        ShowAll();
    }


    void OnClicked(object sender, EventArgs args)
    {
        AboutDialog about = new AboutDialog();
        about.ProgramName = "Battery";
        about.Version = "0.1";
        about.Copyright = "(c) Jan Bodnar";
        about.Comments = @"Battery is a simple tool for 
battery checking";
        about.Website = "http://www.zetcode.com";
        about.Logo = new Gdk.Pixbuf("battery.png");
        about.Run();
        about.Destroy();
    }


    public static void Main()
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }
}
</pre>

<p>
The code example uses a <code>AboutDialog</code> with some of it's features. 
</p>

<pre class="explanation">
AboutDialog about = new AboutDialog();
</pre>

<p>
We create an <code>AboutDialog</code>. 
</p>

<pre class="explanation">
about.ProgramName = "Battery";
about.Version = "0.1";
about.Copyright = "(c) Jan Bodnar";
</pre>

<p>
By setting the properties of the dialog, we specify the name, version and the copyright.
</p>

<pre class="explanation">
about.Logo = new Gdk.Pixbuf("battery.png");
</pre>

<p>
This line creates a logo. 
</p>

<img src="/img/gui/sharpgtk/about.png" alt="AboutDialog">
<div class="figure">Figure: AboutDialog</div>


<h2>FontSelectionDialog</h2>

<p>
The <code>FontSelectionDialog</code> is a dialog for selecting fonts. 
It is typically used in applications, that do some text editing or formatting. 
</p>

<div class="codehead">fontdialog.cs</div>
<pre class="code">
using Gtk;
using System;
 
class SharpApp : Window {
 
    Label label;

    public SharpApp() : base("Font Selection Dialog")
    {
        SetDefaultSize(300, 220);
        SetPosition(WindowPosition.Center);
        DeleteEvent += delegate { Application.Quit(); } ;
        
        label = new Label("The only victory over love is flight.");
        Button button = new Button("Select font");
        button.Clicked += OnClicked;

        Fixed fix = new Fixed();
        fix.Put(button, 100, 30);
        fix.Put(label, 30, 90);
        Add(fix);

        ShowAll();
    }


    void OnClicked(object sender, EventArgs args)
    {
        FontSelectionDialog fdia = new FontSelectionDialog("Select font name");
        fdia.Response += delegate (object o, ResponseArgs resp) {

            if (resp.ResponseId == ResponseType.Ok) {
               Pango.FontDescription fontdesc = 
                   Pango.FontDescription.FromString(fdia.FontName);
               label.ModifyFont(fontdesc);
            }
        };

        fdia.Run();
        fdia.Destroy();
    }

    public static void Main()
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }
}
</pre>

<p>
In the code example, we have a button and a label. We show the 
<code>FontSelectionDialog</code> by clicking on the button.
</p>

<pre class="explanation">
FontSelectionDialog fdia = new FontSelectionDialog("Select font name");
</pre>

<p>
We create the <code>FontSelectionDialog.</code>
</p>

<pre class="explanation">
fdia.Response += delegate (object o, ResponseArgs resp) {

    if (resp.ResponseId == ResponseType.Ok) {
        Pango.FontDescription fontdesc = Pango.FontDescription.FromString(fdia.FontName);
        label.ModifyFont(fontdesc);
    }
};
</pre>

<p>
If we click on the OK button, the font of the label widget changes to the
one, that we selected in the dialog. 
</p>

<img src="/img/gui/sharpgtk/fontdialog.png" alt="FontSelectionDialog">
<div class="figure">Figure: FontSelectionDialog </div>


<h2>ColorSelectionDialog</h2>

<p>
<code>ColorSelectionDialog</code> is a dialog for selecting a color. 
</p>

<div class="codehead">colordialog.cs</div>
<pre class="code">
using Gtk;
using System;
 
class SharpApp : Window {
 
    Label label;

    public SharpApp() : base("Color Dialog")
    {
        SetDefaultSize(300, 220);
        SetPosition(WindowPosition.Center);
        DeleteEvent += delegate { Application.Quit(); } ;
        
        label = new Label("The only victory over love is flight.");
        Button button = new Button("Select color");
        button.Clicked += OnClicked;

        Fixed fix = new Fixed();
        fix.Put(button, 100, 30);
        fix.Put(label, 30, 90);
        Add(fix);

        ShowAll();
    }


    void OnClicked(object sender, EventArgs args)
    {
        ColorSelectionDialog cdia = new ColorSelectionDialog("Select color");
        cdia.Response += delegate (object o, ResponseArgs resp) {

            if (resp.ResponseId == ResponseType.Ok) {
               label.ModifyFg(StateType.Normal, cdia.ColorSelection.CurrentColor);
            }
        };

        cdia.Run();
        cdia.Destroy();
    }


    public static void Main()
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }
}
</pre>

<p>
The example is very similar to the previous one. This time we 
change the color of the label. 
</p>

<pre class="explanation">
ColorSelectionDialog cdia = new ColorSelectionDialog("Select color");
</pre>

<p>
We create the <code>ColorSelectionDialog</code>.
</p>

<pre class="explanation">
cdia.Response += delegate (object o, ResponseArgs resp) {

    if (resp.ResponseId == ResponseType.Ok) {
    label.ModifyFg(StateType.Normal, cdia.ColorSelection.CurrentColor);
    }
};
</pre>

<p>
If the user pressed OK, we get the color and modify the label's color. 
</p>

<img src="/img/gui/sharpgtk/colordialog.png" alt="ColorSelectionDialog">
<div class="figure">Figure: ColorSelectionDialog </div>


<p>
In this part of the GTK# tutorial, we talked about dialogs. 
</p>


<div class="center">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified January 22, 2009  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

